<template>
    <video ref="video" controls class="video-js vjs-default-skin vjs-big-play-centered" width="600" height="400">
        <source :src="src" />
    </video>
</template>

<script>
export default {
    props: ['volume', 'src'],
    data() {
        return {
            player: null,
            volumeVideo: this.volume
        };
    },
    methods: {
        // 封装播放器方法
        play() {
            this.player.src({ src: this.src });
            this.player.load(this.src);
            this.player.play(this.volumeVideo);
        },
        stop() {
            this.player.pause();
        },
        reload() {
            this.stop();
            this.player.load({});
            this.play();
        },
        forward() {
            const currentTime = this.player.currentTime();
            this.player.currentTime(currentTime + 5);
        },
        back() {
            const currentTime = this.player.currentTime();
            this.player.currentTime(currentTime - 5);
        },
        volumeUp() {
            this.player.volume(this.volumeVideo + 0.1);
        },
        volumeDown() {
            this.player.volume(this.volumeVideo - 0.1);
        },
        toggleTv(obj) {
            this.player.src(obj.src);
            this.player.load(obj.load);
            this.player.play(this.volumeVideo);
        }
    },
    mounted() {
        this.player = this.$video(this.$refs.video, this.options, function () {
            this.on('volumechange', () => {
                // 存储音量
                this.volumeVideo = this.volume();
                window.localStorage.volume = this.volume();
            });
            this.on('play', () => {
                this.volume(this.volumeVideo);
            });
        });
    }
};
</script>

<style>
.video-js .vjs-time-control {
    display: block !important;
}
.video-js .vjs-remaining-time {
    display: none !important;
}

.video-js .vjs-big-play-button {
    font-size: 2.5em !important;
    line-height: 2.3em !important;
    height: 2.5em !important;
    width: 2.5em !important;
    -webkit-border-radius: 2.5em !important;
    -moz-border-radius: 2.5em !important;
    border-radius: 2.5em !important;
    background-color: #73859f;
    background-color: rgba(115, 133, 159, 0.5) !important;
    border-width: 0.15em !important;
    margin-top: -1.25em !important;
    margin-left: -1.25em !important;
}
.vjs-big-play-button .vjs-icon-placeholder {
    font-size: 1.63em !important;
}

.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block !important;
}
</style>
